<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>学生考勤记录</title>
    <!-- Fav  Icon Link -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <!-- themify icons CSS -->
    <link rel="stylesheet" th:href="@{/css/themify-icons.css}">
    <!-- Animations CSS -->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!-- Main CSS -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <link rel="stylesheet" th:href="@{/css/green.css}" id="style_theme">
    <link rel="stylesheet" th:href="@{/css/responsive.css}">
    <!-- morris charts -->
    <link rel="stylesheet" th:href="@{/charts/css/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/css/jquery-jvectormap.css}">
    <link rel="stylesheet" th:href="@{/datatable/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">

    <script th:src="@{/js/modernizr.min.js}"></script>
</head>

<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>


<div class="wrapper">
    <div id="content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="widget-area-2 lochana-box-shadow">
                        <h3 class="widget-title">学生考勤记录 </h3>
                        <div class="table-responsive mb-3">
                            <table id="tableId" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th class="no-sort">
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" id="select-all">
                                            <label class="custom-control-label" for="select-all"></label>
                                        </div>
                                    </th>
                                    <th>学号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>楼房号</th>
                                    <th>寝室号</th>
                                    <th>专业</th>
                                    <th>班级</th>
                                    <th>辅导员</th>
                                    <th>考勤时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="attendance:${attendances}">
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox" th:id="${attendance.id}"
                                                   name="id" th:value="${attendance.id}">
                                            <label class="custom-control-label" th:for="${attendance.id}"></label>
                                        </div>
                                    </td>
                                    <td th:text="${attendance.stu_id}"></td>
                                    <td th:text="${attendance.stu_name}"></td>
                                    <td th:text="${attendance.stu_sex}"></td>
                                    <td th:text="${attendance.hou_id}"></td>
                                    <td th:text="${attendance.dor_id}"></td>
                                    <td th:text="${attendance.stu_study}"></td>
                                    <td th:text="${attendance.stu_class}"></td>
                                    <td th:text="${attendance.stu_cname}"></td>
                                    <td th:text="${#dates.format(attendance.check_time,'yyyy-MM-dd HH:mm')}"></td>
                                </tr>
                                </tbody>
                            </table>

                            <button type="button" class="btn btn-info mt-3 mb-0" onclick="tableToExcel()"><span
                                    class="ti-pencil-alt"></span> 导出
                            </button>

                            <!--<button type="button" class="btn btn-danger mt-3 mb-0" onclick="delHouse()"><span
                                    class="ti-trash"></span> 删除
                            </button>-->
                            <!--<button type="button" class="btn btn-primary mt-3 mb-0" onclick="openEditModal()"><span
                                    class="ti-pencil-alt"></span> 编辑
                            </button>-->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>

<!--修改模态框-->
<!--<div class="modal fade" id="editModal" data-th-background="static" data-th-keytype="false">
    <div class="modal-dialog">
        <div class="modal-content">
            &lt;!&ndash;顶部标题&ndash;&gt;
            <div class="modal-header">
                &lt;!&ndash;标题&ndash;&gt;
                <h5>编辑宿舍楼信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            &lt;!&ndash;内容&ndash;&gt;
            <div class="modal-body">
                <form id="formEditDoctor" action="/house/houseUpdate" method="post">
                    <input type="text" hidden id="id" name="id">
                    <div class="form-group col-md-6">
                        <label for="houId">楼房号</label>
                        <input type="text" class="form-control" placeholder="houId" id="houId" name="houId">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houAdd">地址</label>
                        <input type="text" class="form-control" placeholder="houAdd" id="houAdd" name="houAdd">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houNum">楼层数</label>
                        <input type="text" class="form-control" placeholder="houNum" id="houNum" name="houNum"
                               onchange="queryNum1()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houRom">房间数</label>
                        <input type="text" class="form-control" placeholder="houRom" id="houRom" name="houRom"
                               readonly="readonly">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houPeo">应住人数</label>
                        <input type="text" class="form-control" placeholder="houPeo" id="houPeo" name="houPeo"
                               readonly="readonly">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="userName">管理用户</label>
                        <select class="form-control" id="userName" name="userName">
                            <option id="select1"></option>
                            <option th:each="loginIn:${users}" th:value="${loginIn.userName}"
                                    th:text="${loginIn.userName}"></option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houDes">备注</label>
                        <input type="text" class="form-control" placeholder="houDes" id="houDes" name="houDes">
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>-->

<!--增加模态框-->
<!--<div class="modal fade" id="addModal" data-th-background="static" data-th-keytype="false">
    <div class="modal-dialog">
        <div class="modal-content">
            &lt;!&ndash;顶部标题&ndash;&gt;
            <div class="modal-header">
                &lt;!&ndash;标题&ndash;&gt;
                <h5>增加宿舍楼信息</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            &lt;!&ndash;内容&ndash;&gt;
            <div class="modal-body">
                <form id="formEditDoctor1" action="/house/houseAdd" method="post">
                    <input type="text" hidden id="id1" name="id">
                    <div class="form-group col-md-6">
                        <label for="houId">楼房号</label>
                        <input type="text" class="form-control" placeholder="houId" id="houId1" name="houId">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houAdd">地址</label>
                        <input type="text" class="form-control" placeholder="houAdd" id="houAdd1" name="houAdd">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houNum">楼层数</label>
                        <input type="text" class="form-control" placeholder="houNum" id="houNum1" name="houNum"
                               onchange="queryNum11()">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="userName">管理用户</label>
                        <select class="form-control" id="userName1" name="userName">
                            <option id="select2"></option>
                            <option th:each="loginIn:${users}" th:value="${loginIn.userName}"
                                    th:text="${loginIn.userName}"></option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="houDes">备注</label>
                        <input type="text" class="form-control" placeholder="houDes" id="houDes1" name="houDes">
                    </div>
                    <div class="form-group col-md-6 mb-3">
                        <button type="submit" class="btn btn-primary btn-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>-->
<!-- /Back to Top -->
<!-- Jquery Library-->
<script th:src="@{/js/jquery-3.2.1.min.js}"></script>
<!-- Popper Library-->
<script th:src="@{/js/popper.min.js}"></script>
<!-- Bootstrap Library-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<!-- Datatable  -->
<script th:src="@{/datatable/jquery.dataTables.min.js}"></script>
<script th:src="@{/datatable/dataTables.bootstrap4.min.js}"></script>
<!-- Custom Script-->
<script th:src="@{/js/custom.js}"></script>
<script th:src="@{/js/custom-datatables.js}"></script>


<script th:inline="javascript">
    /*全选*/
    $("#select-all").click(function(){
        // 获得最上面的复选框
        var selectAll = document.getElementById("select-all");
        // 判断这个复选框是否被选中
        var ids = document.getElementsByName("id");
        if(selectAll.checked == true) {
            // 最上面的复选框已被选中
            // 获得下面的所有的复选框，修改checked属性
            for(var i = 0; i < ids.length; i++) {
                ids[i].checked = true;
            }
        } else {
            // 最上面的复选框没有被选中
            // 获得下面的所有的复选框，修改checked属性
            for(var i = 0; i < ids.length; i++) {
                ids[i].checked = false;
            }
        }
    });


    /*批量删除*/
    /*function delHouse() {
        var result = "";
        var count = 0;
        $("input[name='id']:checked").each(function () {
            if ($(this).is(':checked')) {
                result += $(this).attr('value') + ",";
                count++;
            } else {
            }
        });
        if (!confirm("确定删除这" + count + "条宿舍信息?")) {
            return;
        }
        if (result == "") {
            alert("请选择您要删除的数据")
        } else {
            window.location.href = "/house/deleteHouse?tag=" + result;
            alert("删除成功");
            /!*返回上一个页面并刷新*!/
           /!* window.location.href = "/house/houses";*!/
        }
    }*/

    /*打开增加模态框*/
    /*function openAddModal() {
        $("#addModal").modal('show');
    }*/

    /*打开修改模态框*/
    /*function openEditModal() {
        var id = "";
        $("input[name='id']:checked").each(function () {
            id = $(this).attr('value');
        });
        if (id == "") {
            alert("请选择要修改的数据")
        } else {
            /!* $("#id").val(id);
             $("#editModal").modal('show');*!/

            $.ajax({
                cache: true,
                type: "get",
                url: "/house/findOneHouse",
                data: {"id": id},
                success: function (data) {
                    console.log(data);
                    $("#houId").val(data[0].houId);
                    $("#houAdd").val(data[0].houAdd);
                    $("#houNum").val(data[0].houNum);
                    $("#houRom").val(data[0].houRom);
                    $("#houPeo").val(data[0].houPeo);
                    $("#houDes").val(data[0].houDes);
                    //给下拉列表的第一个下拉框赋值
                    document.getElementById("select1").text = data[0].userName;
                    $("#select1").val(data[0].userName);
                    document.getElementById("select1").selected = 'selected';


                },
                error: function () {
                    notifyError("获取数据失败，请重新刷新！")
                }
            });
            $("#id").val(id);
            $("#editModal").modal('show');

        }
    }*/

    /*判断是否为正整数 */
    /*function queryNum1() {
        var houNum = $("#houNum").val();
        var r = /^[0-9]*[1-9][0-9]*$/　　//正整数
        if (r.test(houNum)) {
            return true;
        } else {
            alert("请输入正整数")
        }
    }*/



    /*判断是否为正整数 */
    /*function queryNum11() {
        var houNum = $("#houNum1").val();
        var r = /^[0-9]*[1-9][0-9]*$/　　//正整数
        if (r.test(houNum)) {
            return true;
        } else {
            alert("请输入正整数")
        }
    }*/
    const tableToExcel = () => {
        // 要导出的json数据
        var list = [];
        $("input[name='id']:checked").each(function () {
            if ($(this).is(':checked')) {
                var Date = new Object();
                /*result += $(this).attr('value') + ",";*/
                Date.stu_id = $(this).parent().parent().parent().find("td").eq(1).text();
                Date.stu_name = $(this).parent().parent().parent().find("td").eq(2).text();
                Date.stu_sex = $(this).parent().parent().parent().find("td").eq(3).text();
                Date.hou_id = $(this).parent().parent().parent().find("td").eq(4).text();
                Date.dor_id = $(this).parent().parent().parent().find("td").eq(5).text();
                Date.stu_study = $(this).parent().parent().parent().find("td").eq(6).text();
                Date.stu_class = $(this).parent().parent().parent().find("td").eq(7).text();
                Date.stu_cname = $(this).parent().parent().parent().find("td").eq(8).text();
                Date.check_time = $(this).parent().parent().parent().find("td").eq(9).text();
                list.push(Date);
            }
        });
        /*var arr = JSON.stringify(list);*/
        /*console.log(list);
        var message = "stu_id"+list[0];
        console.log(message);*/
        // 要导出的json数据
        /*const jsonData = [
            {
                name:'路人甲',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'炮灰乙',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'土匪丙',
                phone:'123456',
                email:'123@123456.com'
            },
            {
                name:'流氓丁',
                phone:'123456',
                email:'123@123456.com'
            },
        ]*/
        // 列标题
        let str = '<tr>' +
            '<td>学号</td>\n' +
            '<td>姓名</td>\n' +
            '<td>性别</td>\n' +
            '<td>楼房号</td>\n' +
            '<td>寝室号</td>\n' +
            '<td>专业</td>\n' +
            '<td>班级</td>\n' +
            '<td>辅导员</td>\n' +
            '<td>考勤时间</td>' +
            '</tr>';
        // 循环遍历，每行加入tr标签，每个单元格加td标签
        if ("" == list) {
            alert("请选择要操作的记录");
            window.location.href = "/attendance/attendanceRecord";
        }else {
            for (let i = 0; i < list.length; i++) {
                str += '<tr>';
                for (var key in list[i]) {
                    // 增加\t为了不让表格显示科学计数法或者其他格式
                    str += `<td style='mso-number-format:"\\@"'>${list[i][key] + "" + '\t'}</td>`;
                }
                str += '</tr>';
            }
            // Worksheet名
            const worksheet = 'Sheet1';
            const uri = 'data:application/vnd.ms-excel;base64,';

            // 下载的表格模板数据
            const template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
        xmlns:x="urn:schemas-microsoft-com:office:excel"
        xmlns="http://www.w3.org/TR/REC-html40">
        <head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
        <x:Name>${worksheet}</x:Name>
        <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
        </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head><body><table>${str}</table></body></html>`;
            // 下载模板
            window.location.href = uri + base64(template);
        }
    };

    // 输出base64编码
    const base64 = s => window.btoa(unescape(encodeURIComponent(s)));

</script>


</body>
</html>